<template>
  <div class="main">
    <div class="main_left">
      <img :src="imgUrl" />
    </div>
    <div class="main_right">
      <h2 class="sys_title">{{ config.title }}</h2>
      <div class="welcome">— 欢迎登录 —</div>
      <a-form-model
        ref="loginForm"
        :model="loginForm"
        :rules="rules"
      >
        <a-form-model-item prop="username">
          <text-field
            label="用户名"
            icon="user"
            v-model="loginForm.username"
            @pressEnter="handleSubmit"></text-field>
        </a-form-model-item>
        <a-form-model-item prop="password">
          <text-field
            label="密码"
            type="password"
            icon="lock"
            v-model="loginForm.password"
            @pressEnter="handleSubmit"></text-field>
        </a-form-model-item>
        <a-form-model-item>
          <div class="flex">
            <a-checkbox size="large" v-model="checked"> <span class="text">自动登录</span></a-checkbox>
            <span class="text forget_password">忘记密码？</span>
          </div>
        </a-form-model-item>
        <a-form-model-item>
          <a-button
            type="primary"
            :loading="loginBtn"
            shape="round"
            size="large"
            block
            @click="handleSubmit"
          >
            登录
          </a-button>
        </a-form-model-item>
      </a-form-model>
      <div class="error-tip">{{ loginError }}</div>
    </div>
  </div>
</template>

<script>
import md5 from 'md5'
import { mapActions } from 'vuex'
import config from '@/config/defaultSettings'
import { TextField } from '@/components'

export default {
  components: {
    TextField
  },
  data () {
    this.imgUrl = './../config/images/login_title.png'
    this.config = config
    return {
      loginBtn: false,
      loginError: '',
      checked: false,
      loginForm: {
        username: undefined,
        password: undefined
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    ...mapActions(['Login']),
    handleSubmit () {
      this.loginError = ''
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loginBtn = true
          this.Login({
            username: this.loginForm.username,
            password: md5(this.loginForm.password)
          }).then(() => {
            this.loginSuccess()
          }).catch(error => {
            this.requestFailed(error)
          })
        } else {
          return false
        }
      })
    },
    loginSuccess (res) {
      this.loginBtn = false
      this.$router.push({ path: '/' })
      this.$message.success('登录成功！')
    },
    requestFailed (err) {
      this.loginBtn = false
      this.$message.error(err.data.data)
    }
  }
}
</script>

<style lang="less" scoped>
@import url(../../style/_var.less);
.main {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  transform: translate(-50%, -50%);
  box-shadow: 0 8px 20px 0 #0c3275;

  .main_left {
    width: 700px;
    height: 590px;
    background: rgba(0,65,177,0.43);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .main_right {
    background: #ffffff;
    padding: 60px;
    width: 480px;
    user-select: none;

    .sys_title {
      font-size: 24px;
      font-weight: bold;
      text-align: center;
      padding-top: 30px;
      user-select: none;
    }
    .welcome{
      padding: 30px 0;
      font-size: 26px;
      text-align: center;
      user-select: none;
    }
    .text {
      font-size: 14px;
      color: #979797;
      user-select: none;
    }
    .flex {
      align-items: center;
      display: flex;
      justify-content: space-between;
    }
    .forget_password {
      cursor: pointer;
    }
  }
  .error-tip {
    color: @error-color;
    text-align: center;
  }
}
</style>
